import { View, Text, Image } from "@tarojs/components";
import { FC, useState } from "react";
import "./index.scss";
import Taro from "@tarojs/taro";
import { ArrowRight, Edit } from "@nutui/icons-react-taro";
import Avatar from "@/assets/momo_avatar.jpg";
import { ConfigProvider, Dialog, Input, Form } from "@nutui/nutui-react-taro";

const ProfilePage: FC = () => {
  const [visible, setVisible] = useState(false);
  const [logoutVisible, setLogoutVisible] = useState(false);
  const [form] = Form.useForm();

  const handleLogout = () => {
    setLogoutVisible(true);
  };

  const onLogoutConfirm = () => {
    // TODO: 实现退出登录逻辑
    console.log("Logout confirmed");
    setLogoutVisible(false);
  };

  const handleComplaints = () => {
    Taro.navigateTo({
      url: "/pages/complaints/index",
    });
  };

  const handleMessages = () => {
    Taro.navigateTo({
      url: "/pages/messages/index",
    });
  };

  const onEditNickname = async () => {
    const res = await form.validateFields();
    console.log(res);
    // setVisible(false);
  };

  return (
    <View className="profile-page">
      <View className="profile-header">
        <Image className="avatar" src={Avatar} mode="aspectFill" />
        <View className="nickname-edit">
          <Text className="nickname">momo</Text>
          <Edit onClick={() => setVisible(true)} />
        </View>
      </View>

      <View className="menu-list">
        <View className="menu-item" onClick={handleComplaints}>
          <Text className="menu-text">我的投诉</Text>
          <ArrowRight style={{ color: "#ffffff" }} />
        </View>

        <View className="menu-item" onClick={handleMessages}>
          <Text className="menu-text">我的消息</Text>
          <ArrowRight />
        </View>

        <View className="menu-item logout" onClick={handleLogout}>
          <Text className="menu-text">退出登录</Text>
          <ArrowRight />
        </View>
      </View>

      <Dialog
        title="修改昵称"
        visible={visible}
        onConfirm={onEditNickname}
        onCancel={() => setVisible(false)}
      >
        <ConfigProvider
          theme={{
            "--nutui-form-item-label-width": "40px",
          }}
        >
          <Form form={form} labelPosition="left">
            <Form.Item
              name="nickname"
              rules={[
                {
                  //   名称长度为2-6个字符，支持中英文、数字、#
                  pattern: /^[\u4e00-\u9fa5a-zA-Z0-9_#-]{4,8}$/,
                  message: "昵称不符合校验规则",
                },
              ]}
            >
              <Input type="text" placeholder="请输入昵称" />
            </Form.Item>
            <View className="nickname-tips">
              昵称长度为4-8个字符（支持中英文、数字、_-#）
            </View>
          </Form>
        </ConfigProvider>
      </Dialog>

      <Dialog
        title="退出登录"
        visible={logoutVisible}
        // content="确定退出登录吗？"
        onConfirm={onLogoutConfirm}
        onCancel={() => setLogoutVisible(false)}
      />
    </View>
  );
};

export default ProfilePage;
